document.onkeydown=function(event){
    var code = event.keyCode;
    if(code ==13){ //这是键盘的enter监听事件
//绑定焦点，有可能不成功，需要多试试一些标签 
    searchMusic();
  }
}
axios.defaults.baseURL = 'http://test.codeedu.com.cn/wangyiyun';
            //axios.defaults.baseURL = 'http://lycloudmusicphp.natapp1.cc/';
            var url
            var comment
            var lyric
         function $(id){
             return document.getElementById(id)
         }
         function searchMusic() {
             axios.get("/search?keywords="+$("search").value).then(response=>{
                 console.log(response)
                 let musiclist=response.data.result.songs
                 setlist(musiclist)
             },function(err){
                 console.log(err)
             })
         }
         function setlist(musiclist){
             let info=""
             for(let i=0;i<musiclist.length;i++){
                 let name=musiclist[i].name
                 let num=musiclist[i].id
                 info+=`
                 <td>
                     <tr><a id="${i}" href="#" onclick="playMusic(${num},${i});">${name}</a></tr>
                     </td>
                 `;
             }
             $("song_wrapper").innerHTML=info
         }
        function playMusic(musicid,i){
             axios.get("/song/url?id="+musicid).then(response=>{
                 //console.log(response)
                 var musicurl=response.data.data[0].url
                 //console.log(musicurl)
                 //$(i).href=musicurl
                 $("player").src=musicurl
                 getcomment(musicid)
                 getlyric(musicid)
             },function(err){
                 console.log(err)
             })
         }
         function hotcomment(musicid){
             axios.get("/comment/hot?type=0&id="+musicid).then(response=>{
                 //console.log(response)
                 this.comment=response.data.comments
                 let info =""
                 for(let i=0;i<20;i++){
                 let cname=comment[i].user.nickname
                 let con=comment[i].content
                 let img=comment[i].user.avatarUrl
                 if(i%3==0){
                 info+=`    
                    <marquee style="font-size: 20px;"><img src="./img/7.png">${cname}:${con}<img src="./img/8.png"></marquee>
                   `;}
                 if(1%3 == 1){
                    info+=`
                    <marquee style="font-size: 20px;" scrollamount="10"><img src="./img/7.png">${cname}:${con}<img src="./img/8.png"></marquee>
                      
                     `;}
                 if(1%3 == 2){
                    info+=`
                    <marquee style="font-size: 20px;" scrollamount="15"><img src="./img/7.png">${cname}:${con}<img src="./img/8.png"></marquee>
                      
                     `;}}
             $("hello").innerHTML=info
             },function (err) {
                 console.log(err)
             })
         }
         function getcomment(musicid){
             axios.get("/comment/music?id="+musicid).then(response=>{
                 //console.log(response)
                 this.comment=response.data.comments
                 let info =""
                 for(let i=0;i<20;i++){
                 let cname=comment[i].user.nickname
                 let con=comment[i].content
                 let img=comment[i].user.avatarUrl
                 info+=`    
                 <dl>
                            <marquee style="font-size: 20px;" onMouseOut="this.start()" onMouseOver="this.stop()"><img src="./img/7.png"><img id="touxiang"  src="${img}" alt="person">${cname}:${con}<img src="./img/8.png"></marquee>
                  </dl>
                   `;}
             $("comment").innerHTML=info
             },function (err) {
                 console.log(err)
             })
         }
         function getlyric(musicid){
             axios.get("/lyric?id="+musicid).then(response=>{
                 console.log(response)
                 this.lyric=response.data.lrc.lyric
                 console.log(lyric)
                //$("showlyric").innerHTML=lyric
                rolllyric()
             },function(err){
                // console.log(err)


             })
         }
         function rolllyric(){
             const timearr=[]
             const lrcarr=[]
             const reg=/\[(\d{2}:\d{2})\.\d{3}\](.+)/g
             let tmp=reg.exec(lyric)
             while(tmp){
                 timearr.push(tmp[1])
                 lrcarr.push(tmp[2])
                 tmp=reg.exec(lyric)
             } 
             const ul=document.querySelector('showlyric > ul')
             let str=''
             lrcarr.forEach((item,index)=>{
            str+=`<li class="${index===0?'active':''}">${item}</li>`
             })
             let x= document.getElementsByClassName('roll')
             document.getElementsByClassName("roll")[0].innerHTML=str
             const audio=document.querySelector('audio')
             audio.addEventListener('timeupdate',function(){
                 const {currentTime}=this//要不要括号
                 const minutes=parseInt(currentTime/60)
                 const seconds=parseInt(currentTime%60)
                 const timeStr=(minutes<10?'0'+minutes:minutes)+':'+(seconds<10?'0'+seconds:seconds)
                 const index=timearr.findIndex(item =>item === timeStr)
                 if(index!=-1){
                     var t=-index*20+150+'px'
                     let m= document.getElementsByClassName('roll')
                    document.getElementsByClassName("roll")[0].style.top=t
                    let ar= [document.getElementsByClassName('roll')[0].children][0]
                    for(let i=0;i<ar.length;i++)
                    {
                        if(i==index){
                            ar[i].setAttribute('class','active')
                        }
                        else{   ar[i].setAttribute('class','')}
                    }
                 }
                })
         }